<template>
  <div class="article-management">
    <header class="page-header">
      <h1>
        <i class="fas fa-clipboard-check"></i>
        文章管理
      </h1>
      <p class="subtitle">查看所有文章并进行审核</p>
    </header>

    <div class="filters-bar">
      <select v-model="statusFilter" @change="handleStatusChange" class="filter-select">
        <option value="">全部状态</option>
        <option value="pending">待审核</option>
        <option value="approved">已通过</option>
        <option value="rejected">已拒绝</option>
      </select>
      <input 
        v-model="searchKeyword" 
        @input="handleSearch"
        placeholder="搜索标题或作者..."
        type="text"
        class="search-input"
      />
    </div>

    <div class="articles-table-container">
      <table class="articles-table">
        <thead>
          <tr>
            <th>标题</th>
            <th>作者</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="article in articles" :key="article.id">
            <td class="title-cell">{{ article.title }}</td>
            <td>{{ article.author }}</td>
            <td>
              <span :class="['status-badge', article.status]">
                {{ getStatusText(article.status) }}
              </span>
            </td>
            <td>{{ formatDate(article.createdAt) }}</td>
            <td class="actions-cell">
              <button @click="viewArticle(article)" class="btn-view">
                <i class="fas fa-eye"></i> 查看
              </button>
              <button 
                v-if="article.status === 'pending'" 
                @click="approveArticle(article.id)"
                class="btn-approve"
              >
                <i class="fas fa-check"></i> 通过
              </button>
              <button 
                v-if="article.status === 'pending'" 
                @click="rejectArticle(article.id)"
                class="btn-reject"
              >
                <i class="fas fa-times"></i> 拒绝
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页组件 -->
    <Pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      @change="handlePageChange"
    />

    <!-- 查看文章详情模态框 -->
    <div v-if="selectedArticle" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ selectedArticle.title }}</h3>
          <button @click="closeModal" class="close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="article-meta">
            <span><strong>作者：</strong>{{ selectedArticle.author }}</span>
            <span><strong>状态：</strong>{{ getStatusText(selectedArticle.status) }}</span>
          </div>
          
          <!-- 审核记录区域 -->
          <div v-if="selectedArticle.reviewRecords" class="review-records">
            <h4 class="review-records-title">
              <i class="fas fa-history"></i> 审核记录
            </h4>
            <div class="review-record-item">
              <div class="record-row">
                <span class="record-label">审核人：</span>
                <span class="record-value">{{ selectedArticle.reviewRecords.reviewerName || '系统' }}</span>
              </div>
              <div class="record-row">
                <span class="record-label">审核时间：</span>
                <span class="record-value">{{ formatDate(selectedArticle.reviewRecords.reviewTime) }}</span>
              </div>
              <div class="record-row">
                <span class="record-label">审核结果：</span>
                <span :class="['record-value', 'status-text', selectedArticle.status]">
                  {{ getStatusText(selectedArticle.status) }}
                </span>
              </div>
              <div v-if="selectedArticle.reviewRecords.rejectReason" class="record-row">
                <span class="record-label">拒绝原因：</span>
                <span class="record-value reject-reason">{{ selectedArticle.reviewRecords.rejectReason }}</span>
              </div>
            </div>
          </div>
          
          <div class="article-content" v-html="selectedArticle.content"></div>
        </div>
        <div class="modal-footer" v-if="selectedArticle.status === 'pending'">
          <button @click="approveArticle(selectedArticle.id)" class="btn-approve">
            <i class="fas fa-check"></i> 通过审核
          </button>
          <button @click="rejectArticle(selectedArticle.id)" class="btn-reject">
            <i class="fas fa-times"></i> 拒绝审核
          </button>
        </div>
      </div>
    </div>

    <!-- 审核确认模态框 -->
    <div v-if="showApproveConfirm" class="modal-overlay" @click="showApproveConfirm = false">
      <div class="confirm-modal" @click.stop>
        <div class="confirm-header">
          <i class="fas fa-check-circle"></i>
          <h3>确认通过审核</h3>
        </div>
        <p class="confirm-text">确定要通过这篇文章的审核吗？</p>
        <div class="confirm-actions">
          <button @click="showApproveConfirm = false" class="btn-cancel">取消</button>
          <button @click="confirmApprove" class="btn-confirm-approve">
            <i class="fas fa-check"></i> 确认通过
          </button>
        </div>
      </div>
    </div>

    <!-- 拒绝原因输入模态框 -->
    <div v-if="showRejectModal" class="modal-overlay" @click="closeRejectModal">
      <div class="reject-modal" @click.stop>
        <div class="reject-header">
          <i class="fas fa-times-circle"></i>
          <h3>拒绝审核</h3>
        </div>
        <div class="reject-body">
          <label for="rejectReason">请输入拒绝原因：</label>
          <textarea
            id="rejectReason"
            v-model="rejectReason"
            placeholder="请详细说明拒绝的原因..."
            rows="4"
            class="reject-textarea"
            @keydown.enter.ctrl="confirmReject"
          ></textarea>
          <p class="hint-text">提示：Ctrl + Enter 快速提交</p>
        </div>
        <div class="reject-actions">
          <button @click="closeRejectModal" class="btn-cancel">取消</button>
          <button @click="confirmReject" class="btn-confirm-reject" :disabled="!rejectReason.trim()">
            <i class="fas fa-times"></i> 确认拒绝
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Pagination from '../components/Pagination.vue'
import { getAdminArticles, reviewArticle } from '../api/admin'
import { getReviewRecords } from '../api/article'
import { toast } from '../utils/toast'
import { PROXY_CONFIG } from '../api/config.js'
import { getAccessToken } from '../utils/request.js'

const articles = ref([])
const statusFilter = ref('')
const searchKeyword = ref('')
const selectedArticle = ref(null)
const loading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 审核相关状态
const showApproveConfirm = ref(false)
const showRejectModal = ref(false)
const rejectReason = ref('')
const pendingArticleId = ref(null)

// 状态映射：前端显示状态 -> 后端API状态码
const statusMap = {
  '': null,           // 全部状态
  'pending': 1,       // 待审核
  'approved': 2,      // 已通过
  'rejected': 3       // 已拒绝
}

// 模拟数据（添加更多数据以测试分页）- 作为后备数据
const mockArticles = [

]

const fetchArticles = async () => {
  loading.value = true
  try {
    const params = {
      current: currentPage.value,
      size: pageSize.value
    }
    
    // 添加状态筛选参数
    if (statusFilter.value) {
      params.status = statusMap[statusFilter.value]
    }
    
    // 添加搜索关键词参数（如果后端支持）
    if (searchKeyword.value.trim()) {
      params.keyword = searchKeyword.value.trim()
    }
    
    const response = await getAdminArticles(params)
    
    if (response && response.data) {
      // 将后端返回的文章数据转换为前端格式
      const records = response.data.records || []
      articles.value = records.map(article => ({
        id: article.id,
        title: article.title,
        author: article.author || '匿名',
        status: getStatusByCode(article.status),
        createdAt: article.createTime || article.createdAt,
        content: article.content
      }))
      
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
    toast.error('获取文章列表失败')
    // 失败时使用空数组
    articles.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 根据后端状态码转换为前端显示状态
const getStatusByCode = (code) => {
  const codeMap = {
    0: 'pending',    // 草稿当作待审核
    1: 'pending',    // 待审核
    2: 'approved',   // 已通过
    3: 'rejected'    // 已拒绝
  }
  return codeMap[code] || 'pending'
}

// 分页变化处理 - 重新从后端获取数据
const handlePageChange = () => {
  fetchArticles()
}

// 搜索处理 - 重置到第一页并重新获取数据
const handleSearch = () => {
  currentPage.value = 1
  fetchArticles()
}

// 状态筛选变化 - 重置到第一页
const handleStatusChange = () => {
  currentPage.value = 1
  fetchArticles()
}

// 代理服务器基础URL
const PROXY_BASE_URL = PROXY_CONFIG.WECHAT_IMAGE

// 存储微信图片URL到Blob URL的映射
const imageBlobMap = new Map()

// 判断是否是微信图片URL
const isWechatImageUrl = (url) => {
  return url && (
    url.includes('mmbiz.qpic.cn') || 
    url.includes('wx.qlogo.cn') || 
    url.includes('thirdwx.qlogo.cn') ||
    url.includes('weixin.qq.com')
  )
}

// 通过代理获取图片并转换为Blob URL（携带token）
const fetchImageAsBlob = async (imageUrl) => {
  try {
    const token = getAccessToken()
    const headers = {}
    
    if (token) {
      headers['Authorization'] = `Bearer ${token}`
    }
    
    console.log('获取图片:', imageUrl)
    console.log('使用token:', token ? '有' : '无')
    
    const response = await fetch(`${PROXY_BASE_URL}?url=${encodeURIComponent(imageUrl)}`, {
      headers
    })
    
    if (!response.ok) {
      console.error(`图片获取失败: ${response.status}`)
      throw new Error(`Failed to fetch image: ${response.status}`)
    }
    
    const blob = await response.blob()
    const blobUrl = URL.createObjectURL(blob)
    
    // 保存映射关系
    imageBlobMap.set(blobUrl, imageUrl)
    
    console.log('✅ 图片转换成功，Blob URL:', blobUrl)
    return blobUrl
  } catch (error) {
    console.error('获取图片失败:', error)
    return imageUrl // 失败时返回原始URL
  }
}

// 为图片URL添加代理（转换为Blob URL）
const addProxyToImages = async (htmlContent) => {
  console.log('=== addProxyToImages 开始 ===')
  
  if (!htmlContent) return ''
  
  const temp = document.createElement('div')
  temp.innerHTML = htmlContent
  
  const images = temp.querySelectorAll('img')
  console.log('找到图片数量:', images.length)
  
  // 使用 Promise.all 并行处理所有图片
  await Promise.all(
    Array.from(images).map(async (img, index) => {
      const originalSrc = img.getAttribute('src')
      console.log(`\n图片 ${index + 1}:`, originalSrc)
      
      if (!originalSrc) return
      
      // 跳过特殊URL
      if (originalSrc.startsWith('data:') || 
          originalSrc.startsWith('blob:')) {
        console.log('  跳过：特殊URL')
        return
      }
      
      // 只处理微信图片
      if (isWechatImageUrl(originalSrc)) {
        const blobUrl = await fetchImageAsBlob(originalSrc)
        img.setAttribute('src', blobUrl)
      } else {
        console.log('  跳过：非微信图片')
      }
    })
  )
  
  console.log('=== addProxyToImages 结束 ===\n')
  return temp.innerHTML
}

const viewArticle = async (article) => {
  // 处理文章内容中的图片URL（异步）
  const processedContent = await addProxyToImages(article.content)
  
  // 如果文章已审核（通过或拒绝），获取审核记录
  let reviewRecords = null
  if (article.status === 'approved' || article.status === 'rejected') {
    try {
      const response = await getReviewRecords(article.id)
      if (response && response.data) {
        // data 是数组，取第一条记录（最新的审核记录）
        reviewRecords = Array.isArray(response.data) ? response.data[0] : response.data
        console.log('审核记录:', reviewRecords)
      }
    } catch (error) {
      console.error('获取审核记录失败:', error)
    }
  }
  
  selectedArticle.value = {
    ...article,
    content: processedContent,
    reviewRecords
  }
}

const closeModal = () => {
  selectedArticle.value = null
}

const approveArticle = (id) => {
  pendingArticleId.value = id
  showApproveConfirm.value = true
}

const confirmApprove = async () => {
  try {
    await reviewArticle({
      articleId: pendingArticleId.value,
      status: 2
    })
    toast.success('文章已通过审核')
    showApproveConfirm.value = false
    fetchArticles()
    if (selectedArticle.value?.id === pendingArticleId.value) {
      closeModal()
    }
  } catch (error) {
    console.error('审核通过失败:', error)
    toast.error('审核通过失败')
  }
}

const rejectArticle = (id) => {
  pendingArticleId.value = id
  rejectReason.value = ''
  showRejectModal.value = true
}

const closeRejectModal = () => {
  showRejectModal.value = false
  rejectReason.value = ''
  pendingArticleId.value = null
}

const confirmReject = async () => {
  if (!rejectReason.value.trim()) {
    toast.error('请输入拒绝原因')
    return
  }
  
  try {
    await reviewArticle({
      articleId: pendingArticleId.value,
      status: 3,
      rejectReason: rejectReason.value.trim()
    })
    toast.success('文章已拒绝')
    closeRejectModal()
    fetchArticles()
    if (selectedArticle.value?.id === pendingArticleId.value) {
      closeModal()
    }
  } catch (error) {
    console.error('审核拒绝失败:', error)
    toast.error('审核拒绝失败')
  }
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return statusMap[status] || status
}

const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(() => {
  fetchArticles()
})
</script>

<style scoped>
.article-management {
  padding: 30px;
  background: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1rem;
  margin: 0;
}

.filters-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-select,
.search-input {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

.filter-select {
  min-width: 150px;
}

.search-input {
  flex: 1;
  min-width: 250px;
}

.filter-select:focus,
.search-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.articles-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.articles-table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: white;
  font-size: 14px;
}

td {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
  color: #555;
}

.title-cell {
  font-weight: 600;
  color: #2c3e50;
}

.status-badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.approved {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-view,
.btn-approve,
.btn-reject {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-view {
  background: #3498db;
  color: white;
}

.btn-view:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.btn-approve {
  background: #27ae60;
  color: white;
}

.btn-approve:hover {
  background: #229954;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}

.btn-reject {
  background: #e74c3c;
  color: white;
}

.btn-reject:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 2px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

.close-btn {
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  color: #555;
  transition: all 0.3s;
}

.close-btn:hover {
  background: #e9ecef;
  border-color: #e74c3c;
  color: #e74c3c;
}

.modal-body {
  padding: 25px;
  overflow-y: auto;
  flex: 1;
}

.article-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  flex-wrap: wrap;
}

.article-meta strong {
  color: #2c3e50;
}

.article-content {
  line-height: 1.8;
  color: #333;
}

.article-content :deep(h2) {
  color: #2c3e50;
  margin-top: 20px;
  margin-bottom: 10px;
}

.article-content :deep(p) {
  margin-bottom: 15px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 25px;
  border-top: 2px solid #f0f0f0;
  justify-content: flex-end;
}

.modal-footer .btn-approve,
.modal-footer .btn-reject {
  padding: 10px 24px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .article-management {
    padding: 80px 16px 16px;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-select,
  .search-input {
    width: 100%;
    min-width: 100%;
  }

  /* 表格横向滚动 */
  .articles-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .articles-table {
    min-width: 700px;
  }

  th, td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .actions-cell {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-view,
  .btn-approve,
  .btn-reject {
    width: 100%;
    justify-content: center;
  }

  /* 模态框适配 */
  .modal-overlay {
    padding: 0;
  }

  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }

  .modal-header h3 {
    font-size: 1.2rem;
  }

  .article-meta {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .article-management {
    padding: 80px 12px 12px;
  }

  .page-header h1 {
    font-size: 1.3rem;
    gap: 8px;
  }

  th, td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .status-badge {
    font-size: 11px;
    padding: 4px 10px;
  }

  .btn-view,
  .btn-approve,
  .btn-reject {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* 确认模态框样式 */
.confirm-modal,
.reject-modal {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-header,
.reject-header {
  padding: 25px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.confirm-header i {
  font-size: 32px;
  color: #27ae60;
}

.reject-header i {
  font-size: 32px;
  color: #e74c3c;
}

.confirm-header h3,
.reject-header h3 {
  margin: 0;
  font-size: 1.4rem;
  color: #2c3e50;
}

.confirm-text {
  padding: 30px 25px;
  font-size: 16px;
  color: #555;
  margin: 0;
  line-height: 1.6;
}

.reject-body {
  padding: 25px;
}

.reject-body label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.reject-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.3s;
  box-sizing: border-box;
}

.reject-textarea:focus {
  outline: none;
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.hint-text {
  margin-top: 8px;
  font-size: 12px;
  color: #95a5a6;
}

.confirm-actions,
.reject-actions {
  padding: 20px 25px;
  border-top: 2px solid #f0f0f0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 10px 24px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #f8f9fa;
  border-color: #95a5a6;
  transform: translateY(-1px);
}

.btn-confirm-approve {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: white;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-confirm-approve:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.btn-confirm-reject {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: white;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-confirm-reject:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.btn-confirm-reject:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式 - 确认框 */
@media (max-width: 768px) {
  .confirm-modal,
  .reject-modal {
    max-width: 100%;
    width: 95%;
    margin: 0 auto;
  }

  .confirm-header,
  .reject-header {
    padding: 20px;
  }

  .confirm-header h3,
  .reject-header h3 {
    font-size: 1.2rem;
  }

  .confirm-text {
    padding: 25px 20px;
    font-size: 15px;
  }

  .reject-body {
    padding: 20px;
  }

  .confirm-actions,
  .reject-actions {
    padding: 15px 20px;
    flex-direction: column-reverse;
  }

  .btn-cancel,
  .btn-confirm-approve,
  .btn-confirm-reject {
    width: 100%;
    justify-content: center;
  }
}

/* 审核记录样式 */
.review-records {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border-left: 4px solid #3498db;
}

.review-records-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-records-title i {
  color: #3498db;
  font-size: 18px;
}

.review-record-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.record-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.record-row:last-child {
  border-bottom: none;
}

.record-label {
  font-weight: 600;
  color: #7f8c8d;
  min-width: 80px;
  font-size: 14px;
}

.record-value {
  color: #2c3e50;
  flex: 1;
  font-size: 14px;
}

.record-value.status-text {
  font-weight: 600;
}

.record-value.status-text.approved {
  color: #27ae60;
}

.record-value.status-text.rejected {
  color: #e74c3c;
}

.reject-reason {
  color: #e74c3c !important;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .review-records {
    padding: 15px;
  }

  .review-records-title {
    font-size: 14px;
  }

  .record-row {
    flex-direction: column;
    padding: 10px 0;
  }

  .record-label {
    min-width: auto;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .record-value {
    font-size: 13px;
  }
}
</style>
